<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页1183221-会员登录（Vue版）</title>
    <!-- 引入Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
    <!-- 引入Axios用于HTTP请求 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
    <!-- 引入Vite的ES模块加载器（用于加载.vue文件） -->
    <script type="module">
        // 动态导入Vue组件
        import { createApp } from 'vue';
        
        // 注意：在浏览器中直接加载.vue文件需要使用模块加载器
        // 这里我们使用简化版的实现在线解析.vue文件
        // 在实际生产环境中，应该使用Vue CLI或Vite等构建工具
        
        // 定义我们的登录组件
        const LoginComponent = {
            data() {
                return {
                    username: '',
                    password: '',
                    loading: false,
                    errorMessage: ''
                };
            },
            methods: {
                login() {
                    // 重置错误消息
                    this.errorMessage = '';
                    
                    // 表单验证
                    if (!this.username.trim()) {
                        this.errorMessage = '请输入用户名';
                        return;
                    }
                    
                    if (!this.password) {
                        this.errorMessage = '请输入密码';
                        return;
                    }
                    
                    // 显示加载状态
                    this.loading = true;
                    
                    // 模拟登录请求
                    setTimeout(() => {
                        try {
                            // 这里可以替换为实际的API调用
                            console.log('登录请求参数:', { username: this.username, password: this.password });
                            
                            // 模拟成功响应
                            alert('登录成功！');
                            
                            // 跳转到仪表盘页面
                            // window.location.href = '/dashboard.html';
                        } catch (error) {
                            // 处理错误
                            this.errorMessage = '登录失败，请重试';
                            alert(this.errorMessage);
                        } finally {
                            // 隐藏加载状态
                            this.loading = false;
                        }
                    }, 1500);
                },
                handleKeyPress(event) {
                    if (event.key === 'Enter') {
                        this.login();
                    }
                },
                goToRegister() {
                    alert('即将跳转到注册页面');
                    // 实际应用中可以使用以下代码跳转到注册页面
                    // window.location.href = '/register.html';
                }
            },
            template: `
                <div class="login-page">
                    <!-- 登录头部 -->
                    <div class="login-header">
                        <div class="logo">
                            <img src="http://www.sz56t.com:8082/newpage/images/hl.png" alt="Logo" style="height: 40px;">
                            <span>&nbsp;&nbsp;&nbsp;网页1183221-会员登录</span>
                        </div>
                    </div>
                    
                    <!-- 内容区域 -->
                    <div class="content">
                        <div class="center-content">
                            <!-- 地球图像区域 -->
                            <div class="earth-container">
                                <div class="globe">
                                    <img src="http://www.sz56t.com:8082/img/lg_bj.png" alt="Login Image" style="width: 520px; height: 400px;">
                                </div>
                            </div>
                            
                            <!-- 登录表单区域 -->
                            <div class="login-form-container">
                                <div class="form-content">
                                    <div class="form-title">登录</div>
                                    
                                    <!-- 用户名输入框 -->
                                    <div class="form-group">
                                        <div class="input-with-icon">
                                            <span class="input-icon">👤</span>
                                            <input 
                                                type="text" 
                                                v-model="username" 
                                                placeholder="用户名" 
                                                :disabled="loading"
                                                @keyup="handleKeyPress"
                                                autocomplete="username"
                                            >
                                        </div>
                                    </div>
                                     
                                    <!-- 密码输入框 -->
                                    <div class="form-group">
                                        <div class="input-with-icon">
                                            <span class="input-icon">🔒</span>
                                            <input 
                                                type="password" 
                                                v-model="password" 
                                                placeholder="密码" 
                                                :disabled="loading"
                                                @keyup="handleKeyPress"
                                                autocomplete="current-password"
                                            >
                                        </div>
                                    </div>
                                    
                                    <!-- 错误消息显示 -->
                                    <div v-if="errorMessage" class="error-message">
                                        {{ errorMessage }}
                                    </div>
                                    
                                    <!-- 登录按钮 -->
                                    <button 
                                        @click="login" 
                                        class="login-button"
                                        :disabled="loading"
                                    >
                                        {{ loading ? '登录中...' : '登录' }}
                                    </button>
                                    
                                    <!-- 注册链接 -->
                                    <div class="forgot-password">
                                        <a href="#" @click.prevent="goToRegister">还没有账号？免费注册 &gt;</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 页脚 -->
                    <div class="footer">
                        <p>技术支持：XX科技   服务热线：0755-XXXXXXX <a href="http://www.XXX.com" target="_blank">www.jdddf.com</a></p>
                    </div>
                    
                    <!-- 加载状态覆盖层 -->
                    <div v-if="loading" class="loading-overlay">
                        <div class="loading-spinner">
                            <div class="spinner"></div>
                            <p>正在登录，请稍候...</p>
                        </div>
                    </div>
                </div>
            `
        };
        
        // 创建并挂载Vue应用
        const app = createApp(LoginComponent);
        
        // 全局错误处理
        app.config.errorHandler = (err, instance, info) => {
            console.error('Vue应用错误:', err);
            console.error('错误信息:', info);
            alert('应用发生错误，请刷新页面重试');
        };
        
        // 挂载应用
        app.mount('#app');
    </script>
    
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #ffffff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 登录头部样式 */
        .login-header {
            background-color: #0073cf;
            color: white;
            padding: 7px 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-header .logo {
            display: flex;
            align-items: center;
            font-size: 28px;
        }

        /* 内容区域样式 */
        .content {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .center-content {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 900px;
            align-items: center;
        }

        /* 地球容器样式 */
        .earth-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .globe {
            position: relative;
            margin-bottom: 20px;
        }

        /* 登录表单容器样式 */
        .login-form-container {
            width: 410px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        /* 表单内容样式 */
        .form-content {
            width: 100%;
        }

        .form-title {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #0073cf;
        }

        .form-group {
            margin-bottom: 15px;
            width: 100%;
        }

        .form-group input {
            width: 100%;
            height: 36px;
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            background: url('http://www.sz56t.com:8082/img/user.png') no-repeat 8px center;
            padding-left: 30px;
        }

        .form-group:nth-child(2) input {
            background: url('http://www.sz56t.com:8082/img/password.png') no-repeat 8px center;
            padding-left: 30px;
        }

        .form-group input:focus {
            outline: none;
            border-color: #0073cf;
        }

        /* 登录按钮样式 */
        .login-button {
            width: 100%;
            height: 40px;
            background-color: #FF6700;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }

        .login-button:hover:not(:disabled) {
            background-color: #E55B00;
        }

        .login-button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .forgot-password {
            text-align: center;
            margin-top: 15px;
        }

        .forgot-password a {
            color: #0073cf;
            text-decoration: none;
            font-size: 12px;
        }

        .forgot-password a:hover {
            text-decoration: underline;
        }

        /* 页脚样式 */
        .footer {
            background-color: #f5f5f5;
            padding: 10px 0;
            text-align: center;
            color: #666;
            font-size: 12px;
        }

        .footer a {
            color: #0073cf;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        /* 加载状态样式 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .loading-spinner {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
        }

        .spinner {
            border: 4px solid rgba(0, 115, 207, 0.3);
            border-radius: 50%;
            border-top: 4px solid #0073cf;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 错误消息样式 */
        .error-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>